<template>
	<!-- 题目维护 -->
	<div class="box" style="background: #f1f1f1;padding: 0;">
		<!-- 查询条件 -->
		<div class="inpBox">
			<input type="text" name="" id="" class="input" v-model="seachDate.topic"
				:placeholder="`输入题目`" @input="getInit()">
			<van-icon name="arrow-down" @click='showSecectClick = true' class="arrow-down" />
		</div>
		
		<!-- 查询条件弹出框 -->
		<van-popup :show="showSecectClick" @close='showSecectClick = false' position="top" custom-style="height: 50%;">
			<div style="padding: 10px; box-sizing: border-box;">
				<van-divider contentPosition="left">题目分类</van-divider>
				<van-radio-group :value="seachDate.topicClass" @change="onChange($event , 'topicClass')">
					<div style="display: flex;flex-wrap: wrap;">
						<van-radio :name="item" icon-size='16px' v-for="item,index in topicClassList" style="margin: 10px;"
							:key="index">
							{{item}}
						</van-radio>
					</div>
				</van-radio-group>
				
				<van-divider contentPosition="left">难易程度</van-divider>
				<van-radio-group :value="seachDate.difficulty" @change="onChange($event , 'difficulty')">
					<div style="display: flex;flex-wrap: wrap;">
						<van-radio :name="item" icon-size='16px' v-for="item,index in difficulty" style="margin: 10px;"
							:key="index">
							{{item}}
						</van-radio>
					</div>
				</van-radio-group>
				
				<van-divider contentPosition="left">题目类型</van-divider>
				<van-radio-group :value="seachDate.topicType" @change="onChange($event , 'topicType')">
					<div style="display: flex;flex-wrap: wrap;">
						<van-radio :name="item" icon-size='16px' v-for="item,index in topicTypeList" style="margin: 10px;"
							:key="index">
							{{item}}
						</van-radio>
					</div>
				</van-radio-group>
			</div>
		</van-popup>
		
		<!-- 内容列表 -->
		<ul class="list">
			<li v-for="(item,index) in topicList" :key="index" @click="goDetail(item)" @longpress='longpress(item)'>
				<div class="centent">
					<p><span>题目：</span>{{item.topic}}</p>
					<p><span>题目分类：</span>{{item.topicClass}}</p>
					<p><span>题目类型：</span>{{item.topicType}}</p>
					<p><span>难易程度：</span>{{item.difficulty}}</p>
				</div>
				<div class="bottom">
					创建时间：{{item.createTime}}
				</div>
			</li>
			
			<van-empty description="暂无数据" v-if="topicList.length == 0" />
		</ul>
		
		<div class="btn" @click="addTopic">
			<button>添加题目</button>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				showSecectClick:false ,//查询条件弹出框
				seachDate:{},
				topicClassList:[] ,//题目分类列表
				difficulty:[], //难易程度
				topicList:[],
				topicTypeList:[]
			}
		},
		
		mounted() {
			this.getDateDictionary()
		},
		
		onShow() {
			this.getInit()
		},
		
		methods:{
			async getInit(){
				console.log(this.seachDate , 'this.seachDate');
				let result = await this.$axios('overallSituation', {
					databaseName: 'topicList',
					state: 'look',
					...this.seachDate
				}, true)
				
				this.topicList = result.data || []
			},
			
			// 获取数据字典
			async getDateDictionary(){
				// 题目分类
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'tmfl',
				}, false)
				
				result.data.forEach(item=>{
					this.topicClassList.push(item.name)
				})
				
				let result1 = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'nycd',
				}, false)
				
				result1.data.forEach(item=>{
					this.difficulty.push(item.name)
				})
				
				let result2 = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'tmlx',
				}, true)
				
				result2.data.forEach(item => {
					this.topicTypeList.push(item.name)
				})
				
			}, 
			
			// 长按题目
			longpress(item){
				uni.showModal({
					title: '提示',
					content: '您要删除当前题目？',
					confirmText: "删除", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success:async (res)=>{
						if(res.confirm){
							let result = await this.$axios('overallSituation', {
								databaseName: 'topicList',
								state: 'delete',
								_id:item._id
							}, false)
							this.getInit()
						}
					}
				})
			},
			
			// 前往详情
			goDetail(item){
				this.$router(`/subPackages2/pages/maintenanceProblem/add?id=${item._id}`)
			},
			
			// 单选按钮发生变化
			onChange(e , str){
				if(this.seachDate[str] == e.detail){
					this.seachDate[str] = ''
				}else {
					this.seachDate[str] = e.detail
				}
				this.getInit()
			},
			
			// 添加题目
			addTopic(){
				this.$router("/subPackages2/pages/maintenanceProblem/add")
			}
		}
	}
</script>

<style scoped>
	.inpBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 6vh;
		background-color: #f1f1f1;
		overflow: hidden;
		padding: 10px;
		box-sizing: border-box;
		box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
		border-radius: 5px;
	}
	
	.input {
		width: 90%;
		height: 35px;
		padding: 5px 10px;
		box-sizing: border-box;
		font-size: 12px;
		color: #333;
		background: #fff;
		border-radius: 20px;
	}
	
	
	.list {
		width: 100%;
		height: 85vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 10px;
	}
	
	.list li {
		width: 97%;
		border-radius: 10px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
		margin-top: 10px;
		border: 1px solid #bbdefb;
		border-left: 5px solid #64b5f6;
		border-right: 5px solid #64b5f6;
	}
	
	.list li .centent {
		padding: 10px;
		box-sizing: border-box;
	}
	
	.list li p {
		font-size: 12px;
		color: #333;
		margin: 8px 0;
		
	}
	
	.list li p span {
		font-weight: 700;
	}
	
	.list li .bottom {
		width: 100%;
		text-align: right;
		font-size: 12px;
		color: #999;
		padding: 10px;
		border-top: 1px solid #bbdefb;
		box-sizing: border-box;
	}
	
	.btn {
		width: 100%;
		height: 6vh;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.1);
	}
	
	.btn button {
		background-color: #90caf9;
		width: 96%;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #fff;
		font-weight: 700;
	}
	
	>>> .van-radio {
	    align-items: center;
	    display: flex;
	    overflow: hidden;
	    -webkit-user-select: none;
	    user-select: none;
	    margin: 5px 0 !important;
	    font-size: 12px !important;
	}
</style>